<template>
  <div class="uploadImg">
    <!--
      action : 自动上传的地址
      list-type : 设置为照片墙
      :on-preview 钩子  :点击预览时触发的方法
      :on-remove 钩子  :点击移除时触发的方法
      :http-request 钩子  :自定义上传的方法
      :on-change 钩子  :文件状态发生改变是调用
     -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :class="{ disabled: isDisabled }"
      :file-list="fileList"
      :http-request="upLoad"
      :on-change="fileChange"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      :percentage="newPercent"
      style="width: 180px"
      v-if="showPercent"
    ></el-progress>
    <el-dialog
      :visible.sync="dialogVisible"
      class="pic-dialog"
      title="预览图片"
    >
      <img width="100%" :src="imageUrlDialog" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
// 实例化一个操作腾讯云的对象
let cos = new COS({
  SecretId: "AKIDZw3tTnqcASSBdojNfhTyCArHQIuFJ6cr",
  SecretKey: "0iALFsEK9hyyh9KFsEJ7eutb2C9pEMDn",
});

export default {
  name: "uploadimg",
  data() {
    return {
      imageUrlDialog: "",
      imageUrl: "",
      dialogVisible: false,
      fileList: [],
      newPercent: 0,
      showPercent: false,
    };
  },
  computed: {
    isDisabled() {
      return this.fileList.length > 0;
    },
  },
  methods: {
    // 上传之前的回调函数
    beforeAvatarUpload(file) {
      // 判断类型
      const isJPG =
        file.type == "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";

      // 判断大小,小于2M
      const isLt2M = file.size / 1024 / 1024 < 2;

      // 如果不是JPG模式
      if (!isJPG) {
        this.$message.error("上传头像格式不正确");
      }
      // 如果超过2M
      if (!isLt2M) {
        this.$message.error("上传头像大小不能超过 2MB!");
      }
      // 如果都满足了返回true,返回true就可以继续上传
      // 返回false就不上传
      return isJPG && isLt2M;
    },
    // 文件状态发生改变时的事件
    fileChange(file, fileList) {
      // console.log(file, fileList);
      // file : 上传文件的详细信息  fileList :一个数组,上传几个文件就有几个元素
      // 只能添加一张
      this.fileList = fileList;
    },
    // 删除的事件
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.fileList = [];
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    upLoad(params) {
      // 写上传的代码,有一个参数
      // console.log("123", params);
      this.showPercent = true;
      cos.putObject(
        {
          Bucket: "xf0817-1306809184" /*名字--->必须 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          Key: params.file.name /*文件名--->必须 */,
          StorageClass: "STANDARD" /* 文件标准 */,
          Body: params.file, // 上传文件对象

          // 这个函数是上传文件时的上传状态,里面有一个percent显示完成状态  0-1
          onProgress: (progressData) => {
            // console.log(JSON.stringify(progressData));
            this.newPercent = progressData.percent * 100;
          },
        },
        // 上传成功或失败的回调函数,err有值就是失败了,没有值就是成功了
        // 这里面的this指向会被改变,使用箭头函数
        (err, data) => {
          // console.log(data);
          if (!err) {
            // 这里的路径是没有'http://'的,需要手动加
            this.imageUrl = "http://" + data.Location;
            this.fileList = [{ url: "http://" + data.Location }];
          }
          this.percent = 0;
          this.showPercent = false;
        }
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.uploadImg {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}
</style>